<template>
 <div>
    <el-form>
        <div style="margin: 16px;font-size:16px;">
          <div class="row">
            1.维修/放行人员开始维修检查和整机放行前,清点所携带的工具。
          </div>

          <div class="row">
            Q1：
            <div style="display: flex;flex-wrap: wrap;margin-top:4px">
              <el-checkbox-group v-model="form.c1" :disabled="oneCheck">
                <el-checkbox label="2" style="margin-right: 12px;" shape="square">对讲机</el-checkbox>
                <el-checkbox label="3" style="margin-right: 12px;" shape="square">手电筒</el-checkbox>
                <el-checkbox label="5" style="margin-right: 12px;" shape="square">其他&nbsp;</el-checkbox>
                <el-input v-model="form.c1other" :disabled="oneCheck" name="其他" placeholder="其他"
                  :rules="[{ required: true, message: '请填写其他' }]" />
              </el-checkbox-group>
            </div>
          </div>

          <div class="row">
            Q2：
            <div style="display: flex;flex-wrap: wrap;margin-top:4px">
              <el-checkbox-group v-model="form.c2" :disabled="oneCheck1">
                <el-checkbox label="2" style="margin-right: 12px;" shape="square">对讲机</el-checkbox>
                <el-checkbox label="3" style="margin-right: 12px;" shape="square">手电筒</el-checkbox>
                <el-checkbox label="5" style="margin-right: 12px;" shape="square">其他&nbsp;</el-checkbox>
                <el-input v-model="form.c2other" :disabled="oneCheck1"  name="其他" placeholder="其他"
                  :rules="[{ required: true, message: '请填写其他' }]" />
              </el-checkbox-group>
            </div>
          </div>
          <div class="row">
            2.飞行/技术/客舱记录本已签署,并将航站页留存。
          </div>
          <el-checkbox-group v-model="form.d1">
            <el-checkbox label="1" style="margin-right: 12px;" shape="square">是</el-checkbox>
            <el-checkbox label="2" style="margin-right: 12px;" shape="square">否</el-checkbox>
          </el-checkbox-group>

          <div class="row">
            3.加注油液前确认牌号是否正确(油液牌号:{{ form.boatNameInspect }})。若加注滑油时,工作完成后盖好滑油口盖。
          </div>
          <el-input v-model="form.boatNameInspect" name="用户名" placeholder="请输入油液牌号"
            :rules="[{ required: true, message: '请填写油液牌号' }]"/>
          <div class="row">
            4.航前及排故飞机起落架安全销、堵头、跳开关夹等取净。
          </div>
          <el-checkbox-group v-model="form.d2">
            <el-checkbox label="1" style="margin-right: 12px;" shape="square">是</el-checkbox>
            <el-checkbox label="2" style="margin-right: 12px;" shape="square">不适用</el-checkbox>
          </el-checkbox-group>
          <div class="row">
            5.开启客舱门时应急滑梯解除预位
          </div>
          <el-checkbox-group v-model="form.d3" >
            <el-checkbox label="1" style="margin-right: 12px;" shape="square">是</el-checkbox>
            <el-checkbox label="2" style="margin-right: 12px;" shape="square">不适用</el-checkbox>
          </el-checkbox-group>

          <div class="row">
            6.维修人员/放行人员工作结東后,清点所携带的工具(与第1条一致)。
          </div>
          <div class="row">
            Q1：
            <div style="display: flex;flex-wrap: wrap;margin-top:4px">
              <el-checkbox-group v-model="form.c3" :disabled="oneCheck2">
                <el-checkbox label="1" style="margin-right: 12px;" shape="square">一致</el-checkbox>
                <el-checkbox label="0" style="margin-right: 12px;" shape="square">不一致&nbsp;{{
                  this.form.c3other }}</el-checkbox>
              </el-checkbox-group>

            </div>
          </div>
          <div class="row">
            Q2：
            <div style="display: flex;flex-wrap: wrap;margin-top:4px">
              <el-checkbox-group v-model="form.c4" :disabled="oneCheck3">
                <el-checkbox label="1" style="margin-right: 12px;" shape="square">一致</el-checkbox>
                <el-checkbox label="0" style="margin-right: 12px;" shape="square">不一致&nbsp;{{
                  this.form.c4other }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
         <div style="padding: 20px;">
           <div class="row">
          工作者：
          <el-input v-model="form.n1" name="n1" disabled placeholder="请输入工作者" />
        </div>
        <div class="row">
          审核者：
          <el-input v-model="form.n2" name="n2" disabled placeholder="-" />
        </div>
        </div>
       
      </el-form>
      <div style="padding: 20px;">
        <el-button block type="primary" @click="onSubmit">
          提交
        </el-button>
      </div>
 </div>
</template>
<script>
import { edit, toExamine, queryById } from "@/api/airport/outfield";
import { oauthUser, queryString, getLoginInfo } from "@/api/wcLogin";
export default {
  computed: {
    c1Show () {
      return this.form.c1.indexOf('5') !== -1
    },
    c2Show () {
      return this.form.c2.indexOf('5') !== -1
    },
    c3Show () {
      return this.form.c3.indexOf('0') !== -1
    },
    c4Show () {
      return this.form.c4.indexOf('0') !== -1
    },
    bolEdit () {
      return this.state !== 1 && this.state !== 2
    }
  },
  watch: {
    'form.c1': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c1.length, len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len2) {
            this.oneCheck1 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck1 = false;
          }
          if (len1) {
            this.oneCheck1 = true;
          }
        }

      },
    },
    'form.c2': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c1.length, len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len1) {
            this.oneCheck = true;
          }

        } else {
          if (len2 === 0) {
            this.oneCheck = false;
          }
          if (len2) {
            this.oneCheck = true;
          }
        }

      },
    },

    'form.c3': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c3.length, len2 = this.form.c4.length;
        if (this.bolTow1) {
          if (len2) {
            this.oneCheck3 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck3 = false;
          }
          if (len1) {
            this.oneCheck3 = true;
          }
        }

      },
    },
    'form.c4': {
      immediate: true,
      handler (val) {
        const len1 = this.form.c3.length, len2 = this.form.c4.length;
        if (this.bolTow1) {
          if (len1) {
            this.oneCheck2 = true;
          }

        } else {
          if (len2 === 0) {
            this.oneCheck2 = false;
          }
          if (len2) {
            this.oneCheck2 = true;
          }
        }
      },

    },
  },
  data () {
    return {
      // 表单参数
      form: {
        boatNameInspect: '',

        d1: [],
        d2: [],
        d3: [],

        c1: [],
        c1other: '',

        c2: [],
        c2other: '',

        c3: [],
        c3other: '',

        c4: [],
        c4other: '',

        n1: '',
        n2: '',
      },
      routeParam: {},
      state: '',
      wxUser: undefined,
      isFinish: false,
      oneCheck: false,
      oneCheck1: false,
      oneCheck2: false,
      oneCheck3: false,
      bolTow: false,
      bolTow1: false,
    };
  },
  created () {
    this.routeParam = this.$route.query;
    queryById({ id: this.$route.query.id }).then(res => {
      this.bolTow = false;
      this.bolTow1 = false;
      this.state = res.data?.state
      this.bolTow = false;
      const workerInspectTerm = res.data?.inspectTimestamp ? res.data.inspectTimestamp : 0;
      const reviewerInspectTerm = res.data?.reviewerTimestamp ? res.data.reviewerTimestamp : 0;
      let item = {};
      if (workerInspectTerm > reviewerInspectTerm) {
        item = res.data.workerInspectTerm;
      } else {
        item = res.data.reviewerInspectTerm;
      }
      if (item) {
        const l1 = item[0].content.c1.length, l2 = item[0].content.c2.length;
        const l3 = item[5].content.c3.length, l4 = item[5].content.c4.length;
        if(l1 !== 0 || l2 !== 0){
          this.bolTow = true;
        }
        if(l3 !== 0 || l4 !== 0){
          this.bolTow1 = true;
        }
        item.forEach(item => {
          for (let i in item.content) {
            this.form[i] = item.content[i];
          }
        });
      }
      if (this.routeParam.source === 'edit') {
        this.form.n1 = res.data.worker;
      }
      // this.form.n1 = res.data.worker;
      // this.form.n2 = res.data.reviewer;
    })
    const user = JSON.parse(sessionStorage.getItem('userInfo'))
    this.wxUser = user;
    if (this.routeParam.source === 'edit') {
      this.form.n2 = user.nickName;
    } else {
      this.form.n1 = user.nickName;
    }
  },
  methods: {
    finish1 () {
      this.isFinish = true;
      this.onSubmit()
    },
    checkBoxOne (val) {
      if (val.length === 2) {
        val.shift();
      }
    },
    otherC1 (val) {
      console.log(1111);
      this.form.c1other = ''
    },
    otherC2 (val) {
      this.form.c2other = ''
    },
    onSubmit (values) {
      console.log(this.form);

      const inspect = [];
      inspect.push({
        index: 1,
        content: {
          c1: this.form.c1,
          c1other: this.form.c1other,

          c2: this.form.c2,
          c2other: this.form.c2other,
        },
      })
      inspect.push({
        index: 2,
        content: {
          d1: this.form.d1,
        },
      })

      inspect.push({
        index: 3,
        content: { boatNameInspect: this.form.boatNameInspect },
      })

      inspect.push({
        index: 4,
        content: {
          d2: this.form.d2,
        },
      })

      inspect.push({
        index: 5,
        content: {
          d3: this.form.d3,
        },
      })


      inspect.push({
        index: 6,
        content: {
          c3: this.form.c3,
          c3other: this.form.c3other,

          c4: this.form.c4,
          c4other: this.form.c4other,
        },
      })
      console.log(this.$route.params);
      const data = {
        inspectDTOS: inspect,
        id: this.$route.query.id,
        name: this.wxUser.nickName,
        isFinish: this.isFinish,
      }
      console.log(data, 'data');
      if (this.$route.query.source === 'add') {
        edit(data).then((res) => {
          this.$message.success("成功");
          this.$router.push({ name: 'Menu', replace: true })
        });
      } else if (this.$route.query.source === 'edit') {
        toExamine(data).then((res) => {
          this.$message.success("成功");
          this.$router.push({ name: 'Menu', replace: true })
        });
      }

    },
  },
};
</script>


<style lang='scss' scoped>
.row {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-font-size);
  font-size: var(--van-cell-font-size);

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    pointer-events: none;
    border-bottom: 1px solid var(--van-cell-border-color);
    transform: scaleY(0.5);
  }
}

.head {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.flex {
  display: flex;
  justify-content: space-around;
}

.mt46 {
  padding-bottom: 56px;
}
</style>